<template>
	<view class="box">
		<uNavbar title="银行卡列表" bgColor="transparent"></uNavbar>
		<view class="banklist" v-for="item in banklists" :key="item.id">
			<view class="bankitem">
				<view class="bankname">
					{{item.account_bank}}
				</view>
				<view class="banknum">
					****{{item.short_card_no}}
				</view>
				<view class="banktype">
					{{item.card_type_desc}}
				</view>
				<uni-icons type="more-filled" color="#fff"  size="24" class="del" @click="tipShow=true,bankid=item.id" ></uni-icons>
			</view>
		</view>
		<u-popup :show="tipShow" mode="center" @close="tipShow = false" closeable bgColor="transparent">
			<view class="prompt flex_ZC">
				<text class="f36">提示</text>
				<text class="prompt_tit">确定要移除此银行卡吗</text>
		
				<view class="prompt_ntm" @click="del()">
					<text>确定</text>
				</view>
				<view class="empty"></view>
			</view>
		</u-popup>
		<noDatas :xxxList="banklists" :status="status"  :showMore="false"></noDatas>
		<view class="btn" @click="gobindbankcard">
			添加银行卡
		</view>
	</view>

</template>

<script>
	import {banklist,unbindingCard} from "../../api/wallet.js"
	export default {
		data() {
			return {
				type:'',
				toggleList: [{
						label: '提现卡',
						select: true
					},
					{
						label: '付款卡',
						select: false
					}
				],
				selval: "提现卡",
				banklists: [],
				page: 1,
				size: 10,
				status: 'loadmore', //加载前值为loadmore，加载中为loading，没有数据为nomore
				tipShow:false,
				bankid:""
			}
		},
		onShow() {
			this.getbanklist()
		},
		methods: {
			getbanklist() {
				banklist({
					wallet_type:'1'
				}).then(res => {
					if (res.code == 1) {
						let list = res.data
						this.banklists = this.page == 1 ? list : this.banklists.concat(list);
						console.log(this.banklists);
						if (list.length < this.size) this.status = 'nomore';
						else this.status = 'loading';
					}
				})
			},
			clickToggleHandle(ele) {
				this.toggleList.forEach(item => item.select = false)
				this.currLabel = ele.label
				ele.select = true
				console.log(ele)
				this.selval = ele.label
			},
			gobindbankcard() {
				uni.navigateTo({
					url: "/pagesMy/mywallet/bindbankcard"
				})
			},
			del() {
				unbindingCard({
					card_id:this.bankid
				}).then(res=>{
					uni.$u.toast(res.msg)
					if(res.code==1){
						this.tipShow=false
						this.getbanklist()
					}
				})
			}
		},
		onReachBottom() {
			if (this.status != 'nomore') {
				this.page = this.page + 1
				this.getbanklist()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		width: 750rpx;
		height: 100vh;
		background-color:#E0DDDA;
		position: relative;
	}

	.banklist {
		width: 750rpx;
		// height: 900rpx;
		overflow: auto;
		margin-top: 40rpx;

		.bankitem {
			margin: 0 auto;
			width: 690rpx;
			height: 284rpx;
			background: linear-gradient( 90deg, #AB8E68 0%, #D7BA93 100%);
			border-radius: 28rpx 28rpx 28rpx 28rpx;
			position: relative;
			margin-bottom: 20rpx;

			.bankname {
				position: absolute;
				top: 32rpx;
				left: 32rpx;
				color: #FFFFFF;
				font-weight: 400;
				font-size: 32rpx;
			}

			.banknum {
				position: absolute;
				top: 116rpx;
				left: 32rpx;
				font-weight: 400;
				font-size: 48rpx;
				color: #FFFFFF;
			}

			.banktype {
				position: absolute;
				bottom: 32rpx;
				left: 32rpx;
				color: #FFFFFF;
				font-weight: 400;
				font-size: 32rpx;
			}

			.del {
				position: absolute;
				top: 32rpx;
				right: 32rpx;

			}
		}
	}

	.btn {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		z-index: 10;
		bottom: 100rpx;
		width: 464rpx;
		height: 102rpx;
		border-radius: 332rpx 332rpx 332rpx 332rpx;
		border: 2rpx solid #A68A64;
		font-weight: 400;
		font-size: 36rpx;
		color: #333;
		text-align: center;
		line-height: 102rpx;
		margin: 0 auto;
	}
	.prompt {
		width: 600rpx;
		min-height: 400rpx;
		background: #E0DDDA;
		margin: 0 auto;
		border-radius: 20rpx;
		color: #333;
		padding-top: 30rpx;
	}

	.prompt>text {
		margin-top: 40rpx;
	}

	.prompt_tit {
		margin: 0 30rpx;
		font-size: 28rpx;
		color: #333;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}
	
	.prompt_ntm {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		width: 414rpx;
		height: 72rpx;
		line-height: 72rpx;
		background: linear-gradient( 90deg, #AB8E68 0%, #D7BA93 100%);
		border-radius: 28rpx;
		margin-top: 80rpx;
		color: #ffffff;
	}
</style>